import { vw } from "@/common/dimensions";
import globalStyles from "@/common/styles/globalStyles";
import IconButton from "@/components/IconButton";
import LazyImage from "@/components/LazyImage";
import { ALI_OSS_PATH } from "@/config/path";
import { userInfoAtom } from "@/store/user";
import { useAtom } from "jotai";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function WorkHeader() {
	const [userInfo] = useAtom(userInfoAtom);
	const { result_bg_img , avatar , nickname } = userInfo.user_info_json;
	const result_bg_img_path = `${ALI_OSS_PATH}${result_bg_img}`;
    const avatar_path = `${ALI_OSS_PATH}${avatar}`;
    const editBgFunc = () => {
        console.log("点击editBgFunc");
        
    }
	return (
		<View>
            <View style={styles.mask}></View>
			<LazyImage
				style={styles.result_bg}
				uri={result_bg_img_path}
				defaultSource={require("@/assets/common/perch.png")}
			/>
            <View style={styles.editBg}>
                <IconButton path={require('@/assets/work/editBg.png')} size={24} onPress={editBgFunc} />
            </View>

            <View style={[[styles.userInfoBox , globalStyles.rowLine , globalStyles.aiCenter]]}>
                <Text style={styles.nickNameText}> {nickname} </Text>
                <LazyImage
                    style={styles.avatar}
                    uri={avatar_path}
                    defaultSource={require("@/assets/common/perch.png")}
                />
            </View>
		</View>
	);
}

const styles = StyleSheet.create({
    mask:{
        width: 100 * vw,
		height: 100 * vw,
        position:"absolute",
        top:0,
        left:0,
        backgroundColor:"rgba(0,0,0,0.1)",
        zIndex:1
    },
	result_bg: {
		width: 100 * vw,
		height: 100 * vw,
	},
    editBg:{
        position:"absolute",
        top:40 ,
        right:24,
        zIndex:9
    },
    userInfoBox:{
        position:'absolute',
        right:24,
        bottom:12,
        zIndex:1
    },
    nickNameText:{
        color:"#fff",
        fontSize:16,
        fontWeight:"600"
    },
    avatar:{
        width:64,
        height:64,
        borderRadius:8,
        marginLeft:8
    }
});
